<script>
import {defineComponent} from 'vue'
import ActInfoHead from "@/views/act/components/ActInfoHead.vue";
import ActTitle from "@/views/act/components/ActTitle.vue";
import ActTime from "@/views/act/components/ActTime.vue";
import ActPlaceSize from "@/views/act/components/ActPlaceSize.vue";
import ActCats from "@/views/act/components/ActCats.vue";
import actPage from "@/utils/pages/actPage";
import ShowImg from "@/components/ShowImg.vue";

export default defineComponent({
  name: "ActItem",
  components: {ShowImg, ActCats, ActPlaceSize, ActTime, ActTitle, ActInfoHead},
  props: {
    act: Object,
    user: Object,
    apply: {
      type: Object,
      default: null
    }
  },
  methods: {
    gotoActInfo(){
      actPage.info(this.act.actId).open().blank()
    }
  }
})
</script>

<template>
  <div class="act-item-container-div">
    <ActInfoHead
        :user="user"
        :act="act"
        :apply="apply"
    />
    <div class="act-info-text-container-div" @click="$emit('actClick',act.actId)">
      <ActTitle
          :title="act.title"
      />
      <ActCats
          :cats="act.cats"
      />
      <div class="act-info-text-div">
        {{act.info}}
      </div>
      
      <ActTime
          :time1="act.startTime"
          :time2="act.endTime"
      />
      <ActPlaceSize
          :place="act.place"
          :size="act.size"
          :apply-num="act.applyNum"
      />
      
    </div>
    <ShowImg :img-list="act.imgs"/>
  </div>
</template>

<style scoped lang="less">
@import "@/assets/style/less/all.less";
.act-item-container-div {
  display: flex;
  flex-direction: column;
  
  padding: 5px;
  
}
.act-info-text-container-div{
  display: flex;
  flex-direction: column;
  margin: 5px 5px;
  >div{
    margin-bottom: 8px;
  }
}

.act-info-text-div {
  .overflow-line(5);
}
</style>